<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metas -->
    <title>curtains.js | Documentation | ShaderPass class</title>
    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <link rel="canonical" href="https://www.curtainsjs.com/shader-pass-class.html">

    <!-- Facebook OG -->
    <meta property="og:title" content="curtains.js | Documentation | ShaderPass class">
    <meta property="og:type" content="website">
    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta property="og:url" content="https://www.curtainsjs.com/shader-pass-class.html">
    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@martinlaxenaire">
    <meta name="twitter:creator" content="@martinlaxenaire">
    <meta name="twitter:title" content="curtains.js | Documentation | ShaderPass class">
    <meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
    <link rel="manifest" href="images/favicons/site.webmanifest">
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
    <link rel="shortcut icon" href="images/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#202340">
    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#202340">

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

    <div id="canvas"></div>

    <div id="content">

        <header id="header">
            <div class="wrapper">
                <div id="header-wrapper" class="flex-wrapper">
                    <div id="header-title">
                        <a href="/" title="Home">curtains.js</a>
                    </div>
                    <nav id="main-menu">
                        <ul class="flex-wrapper">
                            <li>
                                <a href="get-started.html">Get started</a>
                            </li>
                            <li>
                                <a href="documentation.html" class="active">Docs</a>
                            </li>
                            <li>
                                <a href="download.html">Download</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <section class="content-section api-section">

            <nav id="api-menu-nav">
                <ul id="api-menu">
                    <li>
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="curtains-class.html">Curtains</a>
                            </li>
                            <li>
                                <a href="plane-class.html">Plane</a>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li class="active">
                                <a href="shader-pass-class.html">ShaderPass</a>

                                <div class="api-submenu-content">
                                    <div class="api-submenu-title">
                                        <a href="shader-pass-class.html#basic-usage">Basic usage</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="shader-pass-class.html#parameters">Parameters</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="shader-pass-class.html#properties">Properties</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="shader-pass-class.html#canvases">canvases</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#cross-origin">crossOrigin</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#cull-face">cullFace</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#gl">gl</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#html-element">htmlElement</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#images">images</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#index">index</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#loader">loader</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#renderer">renderer</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#render-order">renderOrder</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#target">target</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#textures">textures</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#type">type</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#uniforms">uniforms</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#user-data">userData</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#uuid">uuid</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#videos">videos</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="shader-pass-class.html#methods">Methods</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="shader-pass-class.html#add-texture">addTexture</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#create-texture">createTexture</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#get-bounding-rect">getBoundingRect</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-canvas">loadCanvas</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-canvases">loadCanvases</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-image">loadImage</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-images">loadImages</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-source">loadSource</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-sources">loadSources</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-video">loadVideo</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#load-videos">loadVideos</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#mouse-to-plane-coords">mouseToPlaneCoords</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#play-videos">playVideos</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#remove">remove</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#set-render-order">setRenderOrder</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="shader-pass-class.html#events">Events</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="shader-pass-class.html#on-after-render">onAfterRender</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#on-after-resize">onAfterResize</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#on-error">onError</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#on-loading">onLoading</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#on-ready">onReady</a>
                                        </li>
                                        <li>
                                            <a href="shader-pass-class.html#on-render">onRender</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="vec-2-class.html">Vec2</a>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <div id="api-content">

                <div class="api-content-inner">
                    <div class="inner-section">
                        <h1>ShaderPass class</h1>

                        <div class="api-item-examples">
                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/framebuffers/ShaderPass.js" title="ShaderPass class source code" target="_blank">Source code</a>
                        </div>

                        <h2 id="basic-usage">Basic usage</h2>
                        <p>
                            Shader passes offers the possibility to add <strong>post-processing</strong> to either a bunch of planes or your whole scene. Think of it as an additional plane that would have the size of your WebGL canvas and that would render a set of planes into a texture and draw it. You'd then be able to manipulate that texture in your fragment shader.
                        </p>
                        <p>
                            Like the <a href="plane-class.html">Plane</a> class it inherits from the Mesh and DOMMesh classes.<br />
                            ShaderPass <strong>extends</strong> the DOMMesh class by handling the creation of a frame buffer object and the creation of a render texture.
                        </p>
                        <p class="api-item-examples">
                            Please note that render targets (and therefore shader passes) disable the WebGL context default antialiasing. If you use them, you should set the <a href="curtains-class.html#curtains-init-parameters">antialias Curtains property</a> to false when initiating your context.<br />
                            You might then want to add an extra antialiasing pass, by using the built-in <a href="fxaa-pass-class.html">FXAAPass</a> class or your own FXAA or MSAA implementation.<br />
                            See the <a href="examples/post-processing-transform-origin/index.html" title="Post processing scrolling wheel with custom transform origin" target="_blank">Post processing scrolling wheel with custom transform origin</a> for an example of how to add a FXAAPass.
                        </p>
                        <h3>Creation</h3>
                        <p>
                            To create a shader pass that will be applied to the whole scene, use its constructor:
                        </p>

                        <div class="code">

                            <div class="code-block">
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({<div class="code-indent"><span class="code-property">container</span>: <span class="code-string">"canvas"</span></div>})<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-comment">
                                // create a new shader pass using our curtains object
                            </div>
                            <div>
                                <span class="code-var">const</span> shaderPass = <span class="code-var">new</span> <span class="code-tag">ShaderPass</span>(curtains)<span class="code-var">;</span>
                            </div>
                        </div>


                        <h2 id="parameters">Parameters</h2>
                        <p>
                            The code above will create a basic shader pass but you won't be able to do much with it. The <a href="curtains-class.html#add-shader-pass">addShaderPass</a> method has a parameter in which you can pass all the options you need:
                        </p>

                        <div class="code">

                            <div class="code-block">
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({<div class="code-indent"><span class="code-property">container</span>: <span class="code-string">"canvas"</span></div>})<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <div>
                                    <span class="code-var">const</span> shaderPassParams = {
                                </div>
                                <div class="code-indent">
                                    <div>
                                        <span class="code-property">vertexShaderID</span>: <span class="code-string">"my-shader-pass-vs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your vertex shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">fragmentShaderID</span>: <span class="code-string">"my-shader-pass-fs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your fragment shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">uniforms</span>: { <span class="code-comment">// uniforms are what will allow you to interact with your shader pass</span>
                                    </div>
                                    <div class="code-indent">
                                        <div>
                                            <span class="code-property">time</span>: {
                                        </div>
                                        <div class="code-indent">
                                            <div>
                                                <span class="code-property">name</span>: <span class="code-string">"uTime"</span><span class="code-var">,</span> <span class="code-comment">// uniform name that will be passed to our shaders</span>
                                            </div>
                                            <div>
                                                <span class="code-property">type</span>: <span class="code-string">"1f"</span><span class="code-var">,</span> <span class="code-comment">// this means our uniform is a float</span>
                                            </div>
                                            <div>
                                                <span class="code-property">value</span>: <span class="code-number">0</span><span class="code-var">,</span> <span class="code-comment">// initial value of the uniform</span>
                                            </div>
                                        </div>
                                        <div>
                                            }<span class="code-var">,</span>
                                        </div>
                                    </div>
                                    <div>
                                        }<span class="code-var">,</span>
                                    </div>
                                </div>
                                <div>
                                    }<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-comment">
                                // create a new shader pass using our curtains object and the above parameters
                            </div>
                            <div>
                                <span class="code-var">var</span> shaderPass = <span class="code-var">new</span> <span class="code-tag">ShaderPass</span>(curtains<span class="code-var">,</span> shaderPassParams)<span class="code-var">;</span>
                            </div>
                        </div>

                        <h3>Using with a render target</h3>
                        <p>If you want to apply your shader pass to just a set of planes instead of your whole scene, you'll have to pass a RenderTarget element as a parameter. See <a href="render-target-class.html#assigning-render-target-to-shader-pass">Assigning a RenderTarget to a ShaderPass</a>.</p>

                        <p>
                            See below for a full list of all <a href="shader-pass-class.html#shader-pass-parameters">possible parameters</a> to know more.
                        </p>

                        <h3>Shaders</h3>
                        <p>
                            Shader passes uses slightly different vertex and fragment shaders than the <a href="plane-class.html">Plane</a> objects.
                        </p>
                        <h3>Vertex shader</h3>
                        <p>
                            Since shader passes does not have projection and model view matrices, the default vertex shader is extremely simple (and optional).<br />
                            If you add a new texture to your shader pass, do not forget to handle its matrix in this vertex shader.
                        </p>

                        <div class="code">
                            <div class="code-block">
                                precision mediump float<span class="code-var">;</span>
                            </div>
                            <div class="code-block">
                                <div class="code-comment">
                                    // those are the mandatory attributes that the lib sets
                                </div>
                                <div>
                                    <span class="code-var">attribute</span> <span class="code-tag">vec3</span> aVertexPosition<span class="code-var">;</span>
                                </div>
                                <div>
                                    <span class="code-var">attribute</span> <span class="code-tag">vec2</span> aTextureCoord<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <div class="code-comment">
                                    // pass your vertex and texture coords to the fragment shader
                                </div>
                                <div>
                                    <span class="code-var">varying</span> <span class="code-tag">vec3</span> vVertexPosition<span class="code-var">;</span>
                                </div>
                                <div>
                                    <span class="code-var">varying</span> <span class="code-tag">vec2</span> vTextureCoord<span class="code-var">;</span>
                                </div>
                            </div>

                            <div>
                                <span class="code-var">void</span> main() {
                            </div>

                            <div class="code-indent">

                                <div class="code-block">
                                    gl_Position = <span class="code-tag">vec4</span>(aVertexPosition<span class="code-var">,</span> <span class="code-number">1.0</span>)<span class="code-var">;</span>
                                </div>

                                <div class="code-comment">
                                    // set the varyings
                                </div>
                                <div class="code-comment">
                                    // use our aTextureCoord attributes as texture coords in our fragment shader
                                </div>
                                <div>
                                    vTextureCoord = aTextureCoord<span class="code-var">;</span>
                                </div>
                                <div>
                                    vVertexPosition = aVertexPosition<span class="code-var">;</span>
                                </div>
                            </div>

                            <div>
                                }
                            </div>
                        </div>

                        <h3>Fragment shader</h3>
                        <p>
                            The ShaderPass object automatically creates a texture holding your shader pass FBO content upon creation. You will have to display that texture to display your shader pass content. If you want to apply any post processing effect, this will be by manipulating this texture.<br />
                            This texture sampler name is <strong>uRenderTexture</strong>.
                        </p>

                        <div class="code">
                            <div class="code-block">
                                precision mediump float<span class="code-var">;</span>
                            </div>
                            <div class="code-block">
                                <div class="code-comment">
                                    // get our varyings
                                </div>
                                <div>
                                    <span class="code-var">varying</span> <span class="code-tag">vec3</span> vVertexPosition<span class="code-var">;</span>
                                </div>
                                <div>
                                    <span class="code-var">varying</span> <span class="code-tag">vec2</span> vTextureCoord<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <div class="code-comment">
                                    // our render texture
                                </div>
                                <div>
                                    <span class="code-var">uniform</span> <span class="code-tag">sampler2D</span> uRenderTexture<span class="code-var">;</span>
                                </div>
                            </div>

                            <div>
                                <div>
                                    <span class="code-var">void</span> main() {
                                </div>

                                <div class="code-indent">

                                    <div class="code-comment">
                                        // display our render texture, which contains our shader pass frame buffer object content
                                    </div>
                                    <div>
                                        gl_FragColor = <span class="code-tag">texture2D</span>(uRenderTexture<span class="code-var">,</span> vTextureCoord)<span class="code-var">;</span>
                                    </div>
                                </div>

                                <div>
                                    }
                                </div>
                            </div>
                        </div>

                        <h3 id="shader-pass-parameters">Complete parameters list</h3>

                        <ul class="api-item-parameters">
                            <li>
                                <span class="api-item-parameter-label">
                                    curtains
                                </span>
                                <span class="api-item-parameter-type">
                                    Curtains class object
                                </span>
                                <span class="api-item-parameter-desc">
                                    Your Curtains class object.
                                </span>
                            </li>
                            <li>
                                <span class="api-item-parameter-label">
                                    params
                                </span>
                                <span class="api-item-parameter-type">
                                    object, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    an object containing the plane parameters:
                                </span>

                                <ul id="add-shader-pass-parameters" class="api-item-parameters-inner-list">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vertexShader
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            your vertex shader as a string. Be careful with the line-breaks as it may throw javascript errors. Will look for vertexShaderID param if not specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vertexShaderID
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the vertex shader ID. Will use a default vertex shader if nothing specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fragmentShader
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            your fragment shader as a string. Be careful with the line-breaks as it may throw javascript errors. Will look for fragmentShaderID param if not specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fragmentShaderID
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the fragment shader ID. Will use a default fragment shader that draws the scene without modifications if nothing specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderOrder
                                        </span>
                                        <span class="api-item-parameter-type">
                                            int, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines in which order the shader passes are drawn. See <a href="shader-pass-class.html#render-order">renderOrder</a> property. Default to 0.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            depthTest
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            if your shader pass should enable or disable the depth test. Default to true.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            depth
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            whether the shader pass render target should use a depth buffer (see <a href="render-target-class.html">RenderTarget</a> class object). Default to false.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            clear
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            whether the shader pass render target content should be cleared before being drawn (see <a href="render-target-class.html">RenderTarget</a> class object). Default to true.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderTarget
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="render-target-class.html">RenderTarget</a> class object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an already existing render target to use. Default to null.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to the textures of the shader pass. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            crossOrigin
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines the crossOrigin process to load images if any (default to "anonymous").
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            uniforms
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the uniforms that will be passed to the shaders (if no uniforms specified there won't be any interaction with the shader pass).
                                        </span>

                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    name
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    string
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The name of the uniform to use in your shaders
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    type
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    string
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The type of your uniform (see <a href="https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html" title="all uniforms types" target="_blank">here</a>).
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    value
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float, integer, Vec2, Vec3, Mat4 or array of floats or integers depending on your uniform type
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The value of the uniform.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>
                        </ul>

                        <h2 id="properties">Properties</h2>
                        <ul>
                            <li id="canvases">
                                <p>
                                    <strong>canvases</strong> (array): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    An array containing all the canvases loaded via the load methods into the shader pass.
                                </p>
                            </li>
                            <li id="cross-origin">
                                <p>
                                    <strong>crossOrigin</strong> (string): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    The cross origin process used to load the medias.
                                </p>
                            </li>
                            <li id="cull-face">
                                <p>
                                    <strong>cullFace</strong> (string): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Which face of the shader pass should be culled (ie not drawn). By default, only the back face of the shader pass is culled.
                                </p>
                            </li>
                            <li id="gl">
                                <p>
                                    <strong>gl</strong> (WebGL context) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Our WebGL context.
                                </p>
                            </li>
                            <li id="html-element">
                                <p>
                                    <strong>htmlElement</strong> (HTML element): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    The HTML element used to create your shader passwhich is your <a href="curtains-class.html#container">Curtains wrapper container</a>.
                                </p>
                            </li>
                            <li id="images">
                                <p>
                                    <strong>images</strong> (array): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    An array containing all the images loaded via the load methods into the shader pass.
                                </p>
                            </li>
                            <li id="index">
                                <p>
                                    <strong>index</strong> (integer): <span class="api-item-version">v3.0</span> <span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The index of your shader pass in the <a href="curtains-class.html#shader-passes">Curtains shaderPasses array</a>.
                                </p>
                            </li>
                            <li id="loader">
                                <p>
                                    <strong>loader</strong> (PlaneTextureLoader class object): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The shader pass internal texture loader.
                                </p>
                            </li>
                            <li id="renderer">
                                <p>
                                    <strong>renderer</strong> (Renderer class object): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The Renderer class object created by our curtains object.
                                </p>
                            </li>
                            <li id="render-order">
                                <p>
                                    <strong>renderOrder</strong> (int): <span class="api-item-version">v7.3</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The shader pass renderOrder value, which determines in which order the shader passes are drawn.<br />
                                    A shader pass will be drawn after shader passes with a lower renderOrder number.<br />
                                    Use <a href="plane-class.html#set-render-order">setRenderOrder()</a> to change this value. Default to 0.<br />
                                    See <a href="scene-rendering-order.html">Scene rendering order</a> to know more about how the things are drawn.
                                </p>
                            </li>
                            <li id="target">
                                <p>
                                    <strong>target</strong> (RenderTarget class object): <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    The render target used to render the shader pass.
                                </p>
                            </li>
                            <li id="textures">
                                <p>
                                    <strong>textures</strong> (array): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    An array containing all the shader pass' <a href="texture-class.html">Textures</a> already created.
                                </p>
                            </li>
                            <li id="type">
                                <p>
                                    <strong>type</strong> (string): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Class object type: "ShaderPass".
                                </p>
                            </li>
                            <li id="uniforms">
                                <p>
                                    <strong>uniforms</strong> (object): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    An object containing all the uniforms you passed as parameters.<br />
                                    You can update your uniform by modifying its value property.<br />
                                    Since version 7.0, <strong>you can directly use <a href="vec-2-class.html">Vec2</a>, <a href="vec-3-class.html">Vec3</a>, <a href="mat-4-class.html">Mat4</a> and <a href="quat-class.html">Quat</a> objects as uniform values</strong> instead of arrays.
                                </p>
                            </li>
                            <li id="user-data">
                                <p>
                                    <strong>userData</strong> (object): <span class="api-item-version">v4.2</span>
                                </p>
                                <p>
                                    An empty object to store any additional data or custom properties into your shader pass.
                                </p>
                            </li>
                            <li id="uuid">
                                <p>
                                    <strong>uuid</strong> (string): <span class="api-item-version">v6.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The shader pass's unique identifier.
                                </p>
                            </li>
                            <li id="videos">
                                <p>
                                    <strong>videos</strong> (array): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    An array containing all the videos loaded via the load methods into the shader pass.
                                </p>
                            </li>
                        </ul>

                        <h2 id="methods">Methods</h2>
                        <ul>
                            <li id="add-texture">
                                <p>
                                    <strong>addTexture</strong>(texture): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function takes an already existing texture and adds it to the shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texture
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="texture-class.html">Texture</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            The texture to add to this shader pass. Equivalent of the Texture class <a href="texture-class.html#add-parent">addParent()</a> method.
                                        </span>

                                    </li>
                                </ul>
                            </li>
                            <li id="create-texture">
                                <p>
                                    <strong>createTexture</strong>(params): <span class="api-item-version">v2.0</span><span class="api-item-version api-item-version-update">updated in v5.1</span>
                                </p>
                                <p>
                                    This function will create a new <a href="texture-class.html">Texture</a> and add it to our ShaderPass.<br />
                                    The newly created texture will be returned.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            params
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optionnal
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an object containing the texture parameters:
                                        </span>

                                        <ul id="create-texture-parameters" class="api-item-parameters-inner-list">
                                            <li>
												<span class="api-item-parameter-label">
													sampler
												</span>
                                                <span class="api-item-parameter-type">
													string, optionnal
												</span>
                                                <span class="api-item-parameter-desc">
													a string to set the name of your sampler uniform in your shader. Will also impact the texture matrix uniform name. If not specified, will name your sampler "uSampler" + index of this texture in your shader pass.
												</span>
                                            </li>
                                            <li>
												<span class="api-item-parameter-label">
													fromTexture
												</span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> object, optionnal
												</span>
                                                <span class="api-item-parameter-desc">
													an already existing texture to copy into your new texture. Similar to the Texture class' <a href="texture-class.html#set-from-texture">setFromTexture()</a> method.
												</span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> the newly created <a href="texture-class.html">Texture</a> if successful.
                                </p>
                            </li>

                            <li id="get-bounding-rect">
                                <p>
                                    <strong>getBoundingRect</strong>(): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    Useful to get our <a href="curtains-class.html#container">container</a> HTML element bounding rectangle without causing a reflow/layout repaint. Be careful as the values are relative to your <a href="curtains-class.html#pixel-ratio">Curtains pixelRatio</a> value.
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the container HTML element width, height, top and left positions.
                                </p>
                            </li>

                            <li id="load-canvas">
                                <p>
                                    <strong>loadCanvas</strong>(canvasElement, textureOptions, successCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    This function takes a canvas HTML element, creates a <a href="texture-class.html">Texture</a> using it and loads it into your shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            canvasElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML canvas element
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML canvas element to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-canvas-text/index.html" title="Text planes using canvas" target="_blank">Text planes using canvas</a> example.
                                </p>
                            </li>

                            <li id="load-canvases">
                                <p>
                                    <strong>loadCanvases</strong>(canvasElements, texturesOptions, successCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    This function takes an array of canvas HTML elements and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            canvasElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML canvas elements
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML canvas elements to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-image">
                                <p>
                                    <strong>loadImage</strong>(imageElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an image HTML element (or image source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            imageElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML image element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML image element or image source URL to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(image, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    image
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML image element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The image you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-images">
                                <p>
                                    <strong>loadImages</strong>(imageElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of image HTML elements (or images sources URL) and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            imageElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML image elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML image elements or images sources URL to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(image, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    image
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML image element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The image you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> example.
                                </p>
                            </li>

                            <li id="load-source">
                                <p>
                                    <strong>loadSource</strong>(sourceElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes a source element (or source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            sourceElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            either image, canvas, video HTML element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an image, canvas or video HTML element to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(source, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    source
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    either an image, canvas or video HTML element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The source you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-sources">
                                <p>
                                    <strong>loadSources</strong>(sourceElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of source elements (or sources URL), creates <a href="texture-class.html">Textures</a> using them and loads them into your shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            sourceElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of either images, canvases or videos HTML elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array of image, canvas or video HTML elements or sources URL to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(source, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    source
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    either an image, canvas or video HTML element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The source you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-video">
                                <p>
                                    <strong>loadVideo</strong>(videoElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes a video HTML element (or video source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your shader pass.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            videoElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML video element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML video element or video source URL to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(video, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    video
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML video element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The video you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-videos">
                                <p>
                                    <strong>loadVideos</strong>(videoElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v3.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of video HTML elements (or videos sources URL) and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            videoElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML video elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML video elements or videos sources URL to load into your shader pass.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(video, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    video
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML video element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The video you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="mouse-to-plane-coords">
                                <p>
                                    <strong>mouseToPlaneCoords</strong>(xMousePosition, yMousePosition): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    Get the mouse coordinates relative to the shader pass clip space values. Use it to send to a uniform and interact with your shader pass. A shader pass coordinates ranges from (-1, 1) in the top left corner to (1, -1) in the bottom right corner, which means the values along the Y axis are inverted.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            xMousePosition
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            mouse event clientX value.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            yMousePosition
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            mouse event clientX value.
                                        </span>
                                    </li>
                                </ul>
                            </li>

                            <li id="play-videos">
                                <p>
                                    <strong>playVideos</strong>(): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will automatically start all of your shader pass videos playback. If you are not calling it after a user action it might not work on mobile.
                                </p>
                            </li>

                            <li id="remove">
                                <p>
                                    <strong>remove</strong>(): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function will remove the shader pass and its render target from our Curtains object and renderer and delete all of its textures. It will also update all other shader passes indexes.
                                </p>
                            </li>
                            <li id="set-render-order">
                                <p>
                                    <strong>setRenderOrder</strong>(renderOrder): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Sets the shader pass new <a href="plane-class.html#render-order">render order</a>.<br />
                                    A shader pass will be drawn after the shader passes with a lower renderOrder number. Negative numbers are accepted. You can ommit the renderOrder parameter to reset a shader pass renderOrder value.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderOrder
                                        </span>
                                        <span class="api-item-parameter-type">
                                            int
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the new render order to use. Default to 0.
                                        </span>
                                    </li>
                                </ul>
                            </li>

                        </ul>

                        <h2 id="events">Events</h2>
                        <ul>
                            <li id="on-after-render">
                                <p>
                                    <strong>onAfterRender</strong>(callback): <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    This function will be called just after your shader pass has been drawn.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                            </li>
                            <li id="on-after-resize">
                                <p>
                                    <strong>onAfterResize</strong>(callback): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be called each time your container has been resized, after everything has been updated.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                            </li>
                            <li id="on-error">
                                <p>
                                    <strong>onError</strong>(callback): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function is called if there's an error while instancing your shader pass, usually because the shaders compilation failed.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">

                                </p>
                            </li>
                            <li id="on-loading">
                                <p>
                                    <strong>onLoading</strong>(callback(texture)): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be fired each time a source element (either an image, a canvas or a video) of the shader pass has been loaded and is ready to display. You'll have access here to the newly created texture. Useful to handle a loader or manipulate the texture.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute, with the newly created texture passed as parameter.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> example.
                                </p>
                            </li>
                            <li id="on-ready">
                                <p>
                                    <strong>onReady</strong>(callback): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be called once our shader pass is all set up and ready to be drawn.<br />
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> example.
                                </p>
                            </li>
                            <li id="on-render">
                                <p>
                                    <strong>onRender</strong>(callback): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be triggered for each shader pass at each requestAnimationFrame call. Useful to update a time uniform.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your ShaderPass object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                        </ul>
                    </div>
                </div>

            </div>

        </section>
    </div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>